<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=["/js/service/spot.js","/js/service/deviceStatus.js","/webjars/1.0.0/js/components.js","/js/components.js",
"/js/app/deviceStatus.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/index.css"] in base/>
<@base.page "">

    <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24">
                    <div :style="treeStyle">
                        <tree-spot-device @node_click="getTreeSelectedVal" v-bind:is-load-device="false" v-model="treeData"
                                          @collapse="collapse" @get_children_spots="getChildrenSpot" v-bind:include-current-node="true"></tree-spot-device>
                    </div>
                    <div :style="tableStyle">
                        <el-col :span="24" class="toolbar">
                            <el-form :inline="true" :model="searchVm">
                                <el-form-item label="">
                                    <el-input style="width: 150px;"v-model="searchVm.deviceName" clearable placeholder="设备名称"></el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-input style="width: 150px;"v-model="searchVm.deviceCode" clearable placeholder="通信识别码"></el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-select style="width: 150px;"v-model="searchVm.protocolStype"  clearable placeholder="类型" >
                                        <el-option label="snmp" value="snmp"></el-option>
                                        <el-option label="捷宸" value="捷宸"></el-option>
                                        <el-option label="虚拟设备" value="虚拟设备"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-input style="width: 150px;"v-model="searchVm.netName" clearable placeholder="网关"></el-input>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-input style="width: 150px;"v-model="searchVm.protocolName" clearable placeholder="Mib库"></el-input>
                                </el-form-item>
                                <@but.search "search()" ":loading='tableVm.loading'"/>
                            </el-form>
                        </el-col>
                        <!--表格-->
                       <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" v-loading="tableVm.loading" :cell-class-name="filterClass">
                            <el-table-column prop="deviceName" label="设备名称"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="deviceCode" label="通信识别码"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="soptName" label="所属站点"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="protocolStype" label="类型"  min-width="100" show-overflow-tooltip :formatter="formatterStype"></el-table-column>
                            <el-table-column prop="netName" label="网关"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="protocolName" label="Mib库/协议名"  min-width="100" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="deviceRstatus" label="接收状态"  min-width="100" show-overflow-tooltip :formatter="formatterStatus"></el-table-column>
                        </el-table>
                        <div class="block">
                            <el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
                        </div>
                    </div>
                </el-col>
            </section>
        </el-col>
    </div>

</@base.page>
